<template>
	<tm-fullView>
		<tm-menubars title="图标" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">基本示例</view>
			<tm-icons :size="48" name="icon-filter-fill"></tm-icons>
			<tm-icons color="red" :size="48" name="icon-paperplane-fill"></tm-icons>
			<tm-icons color="blue" :size="48" name="icon-position-fill"></tm-icons>
			<tm-icons color="pink" :size="48" name="icon-layergroup-fill"></tm-icons>
			<tm-icons color="green" :size="48" name="icon-unlock-fill"></tm-icons>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">图片图标</view>
		
			<tm-icons :size="100" name="https://roundicons.com/wp-content/uploads/2017/09/Monster-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://roundicons.com/wp-content/uploads/2017/09/Printer-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://roundicons.com/wp-content/uploads/2017/09/Sun-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://roundicons.com/wp-content/uploads/2017/09/Triple-Tap-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://roundicons.com/wp-content/uploads/2017/09/Flag-freebie-icon.png"></tm-icons>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">其它组件上应用图标</view>
			<tm-listitem
				:margin="[0, 32]"
				title="应用图标"
				:show-left-icon="true"
				left-icon="https://roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"
			></tm-listitem>
			<view class="flex-between">
				<tm-button icon="icon-paperplane-fill" theme="bg-gradient-blue-accent-b">飞信</tm-button>
				<tm-button :icon-size="60" icon="https://roundicons.com/wp-content/uploads/2017/09/Candles-freebie-icon.png" theme="white">飞信</tm-button>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">自己拓展图标（字体集：myicon，前缀：myicon）</view>
			
			<tm-icons color="red" :size="48" name="myicon-camera"></tm-icons>
			<tm-icons color="blue" :size="48" name="myicon-music"></tm-icons>
			<tm-icons color="pink" :size="48" name="myicon-news"></tm-icons>
			<tm-icons color="green" :size="48" name="myicon-phone"></tm-icons>
			<tm-icons color="green" :size="48" name="myicon-video"></tm-icons>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
export default {
	components: { tmFullView, tmMenubars, tmSheet, tmButton, tmIcons, tmListitem },
	data() {
		return {};
	},
	methods: {}
};
</script>

<style>

</style>
